<template>
    <div class="box-profile">
        <div class="header" @click="goLogin">
            <img src="@/assets/img/Profile/user/user1.jpg" alt="">
            <p>一个达不刘</p>
            <img style="width:18px;height:18px" src="@/assets/img/Profile/icon_arrow_right_darkgray.png" alt="">
        </div>
        <div @click="router.push({name:'Order'})" class="order">
            <p>我的订单</p>
            <img src="@/assets/img/Profile/icon_arrow_right_darkgray.png" alt="">
        </div>
        <ul class="category">
            <li>
                <img src="@/assets/img/Profile/pay.png" alt="">
                <p>代付款</p>
            </li>
            <li>
                <img src="@/assets/img/Profile/goods.png" alt="">
                <p>代收货</p>
            </li>
            <li>
                <img src="@/assets/img/Profile/rate.png" alt="">
                <p>评价</p>
            </li>
            <li>
                <img src="@/assets/img/Profile/sale.png" alt="">
                <p>待退款</p>
            </li>
        </ul>
        <ul class="list">
            <li>
                <img src="@/assets/img/Profile/assets.png" alt="">
                <p>我的资产</p>
                <img src="@/assets/img/Profile/icon_arrow_right_darkgray.png" alt="">
            </li>
            <li>
                <img src="@/assets/img/Profile/discount.png" alt="">
                <p>优惠券</p>
                <img src="@/assets/img/Profile/icon_arrow_right_darkgray.png" alt="">
            </li>
            <li>
                <img src="@/assets/img/Profile/collection.png" alt="">
                <p>我的收藏 </p>
                <img src="@/assets/img/Profile/icon_arrow_right_darkgray.png" alt="">
            </li>
            <li @click="goAddress">
                <img src="@/assets/img/Profile/address.png" alt="">
                <p>地址管理</p>
                <img src="@/assets/img/Profile/icon_arrow_right_darkgray.png" alt="">
            </li>
            <li>
                <img src="@/assets/img/Profile/qualifications.png" alt="">
                <p>资质证照</p>
                <img src="@/assets/img/Profile/icon_arrow_right_darkgray.png" alt="">
            </li>
            <li>
                <img src="@/assets/img/Profile/agreement.png" alt="">
                <p>协议规则</p>
                <img src="@/assets/img/Profile/icon_arrow_right_darkgray.png" alt="">
            </li>
            <li>
                <img src="@/assets/img/Profile/help.png" alt="">
                <p>帮助与反馈</p>
                <img src="@/assets/img/Profile/icon_arrow_right_darkgray.png" alt="">
            </li>
        </ul>
        <div class="btn-box">
            <button v-show="isLogin" @click="clearnHandler" class="btn">退出</button>
        </div>
        <MiNav class="nav" :status="'Profile'"></MiNav>
    </div>

</template>

<script setup lang="ts">
import MiNav from '@/components/MiNav/MiNav.vue';
import { useRouter } from 'vue-router';
import { getCurrentInstance, onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus';



const isLogin = ref<boolean>(false)
onMounted(() => {
    isLogin.value = sessionStorage.getItem('token') ? true : false
})
const { proxy }: any = getCurrentInstance()
const router = useRouter()

const goLogin = (): void => {
    if (sessionStorage.getItem('token')) return
    else router.push({ name: 'Login' })
}

const clearnHandler = async (): Promise<void> => {
    await proxy.$miConfirm({
        title: "提示",
        text: "确定要退出登录嘛？",
        isDefault: () => false
    })
    sessionStorage.clear()
    localStorage.clear()
    ElMessage({
        type: 'success',
        message: "退出成功！"
    })
    isLogin.value = false
}

const goAddress = async () => {
    router.push({ name: 'Address' })

}
</script>
<style lang="stylus" scoped>
.nav
    flex-shrink 0
.box-profile
    height 100%
    width 100%
    background-color #f4f4f4
    display flex
    flex-direction: column


.header
    height 100px
    background-image url('../../assets/img/Profile/ucenter_bg_top.png')
    background-size cover
    display flex
    align-items center
    color: rgb(255, 255, 255);
    font-size: 14px;
    padding-right: 20px;

.header img
    width 60px
    height 60px
    border-radius: 30px;
    margin-left 25px

.header p
    padding-left 20px
    flex-grow 1

.order
    background-color #fff
    padding 5px 10px 0 20px
    display flex
    align-items center
    justify-content space-between
    height 40px
    border-bottom 1px solid rgb(229, 229, 229)
    color rgb(51, 51, 51)
    font-size 14px



.order img
    width 15px
    height 15px

.category
    display flex
    justify-content center
    align-items center
    background-color #fff
    
.category li
    height 70px
    flex-grow 1
    display flex
    flex-direction column
    align-items center
    justify-content space-evenly
    color: rgba(0, 0, 0, 0.6);
    font-size: 13px;


.category img
    width 40px
    height 40px

.list
    background-color #fff
    margin-top 5px
    display flex
    flex-direction column
    

.list li
    height 49px
    display flex
    margin-right: 10px
    flex-grow 1
    align-items center
    border-bottom 1px solid #e5e5e5;

.list li p
    flex-grow 1

.list li img:first-child
    height 38px
    width 38px

.list li img:last-child
    height 15px
    width 15px

.btn-box
    flex-grow 1
    display flex
    justify-content center    
    align-items center
.btn
    margin-top 5px
    height 45px
    width 100px
    border-color rgb(178, 178, 178);
    background-color: rgb(255, 255, 255);
    border-radius: 5px;
    border-width: 1px;
</style>
